<!--
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT License.
-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Page with Shadow DOMs</title>
        <style>
            .shadow-container {
                height: 100px;
                width: 100%;
                border: 1px solid black;
            }
        </style>
        <script>
            function addShadowContent(id, mode, nested) {
                const container = document.getElementById(id);
                const shadowRoot = container.attachShadow({ mode: mode });
                if (nested) {
                    shadowRoot.innerHTML =
                        '<div id="child-shadow-container" class="shadow-container"></div>';
                    const childContainer = shadowRoot.getElementById('child-shadow-container');
                    const childShadowRoot = childContainer.attachShadow({ mode: 'open' });
                    childShadowRoot.innerHTML =
                        '<p id="text">untabbable element</p><textarea id="text-area"></textarea><button id="button">hello</button>';
                } else {
                    shadowRoot.innerHTML =
                        '<p id="text">untabbable element</p><textarea id="text-area"></textarea><button id="button">hello</button>';
                }
            }

            window.addEventListener('DOMContentLoaded', () => {
                addShadowContent('open-shadow-container', 'open', false);
                addShadowContent('nested-shadow-container', 'open', true);
                addShadowContent('closed-shadow-container', 'closed', false);
            });
        </script>
    </head>

    <body>
        <h1>Page with Shadow DOMs</h1>

        <h2>Open shadow DOM container</h2>
        <div id="open-shadow-container" class="shadow-container"></div>

        <h2>Nested shadow DOM container</h2>
        <div id="nested-shadow-container" class="shadow-container"></div>

        <h2>Closed shadow DOM container</h2>
        <div id="closed-shadow-container" class="shadow-container"></div>
    </body>
</html>
